<template>
  <div>
    <!--引用表格-->
   <BasicTable @register="registerTable" :rowSelection="rowSelection" :rowClassName="rowclassname">
     <!--插槽:table标题-->
      <template #tableTitle>
          <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="openTargetModal(4)"> 复制</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="urgingBillFirst"> 收款通知书</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="urgingBill"> 催款通知书</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="urgingBillZnj"> 催款通知书(含滞纳金)</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="openTargetExportModal()"> 导出(银行代扣)</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="openExportModalForCheck()"> 导出(银行核对)</a-button>

         <!-- <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>-->
<!--          <a-dropdown v-if="selectedRowKeys.length > 0">
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="batchHandleDelete">
                    <Icon icon="ant-design:delete-outlined"></Icon>
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button>批量操作
                <Icon icon="mdi:chevron-down"></Icon>
              </a-button>
        </a-dropdown>-->
      </template>
       <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
      <!--字段回显插槽-->
      <template #htmlSlot="{text}">
         <div v-html="text"></div>
      </template>
      <!--省市区字段回显插槽-->
      <template #pcaSlot="{text}">
         {{ getAreaTextByCode(text) }}
      </template>
      <template #fileSlot="{text}">
         <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
         <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <DbGlfscModal @register="registerModal" @success="handleSuccess"></DbGlfscModal>
    <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
   <!-- <CopyByMonth @register="registerModalMonthSelect" @success="handleSuccess1"></CopyByMonth>-->
    <CopyByMonth @register="register4" />
    <DbGlfscExportModal @register="registerExport" />
    <DbGlfscUrginBillFirst @register="registerUrginBillFirst" />
  </div>
</template>

 
<script lang="ts" name="assets/accountReceivable/DbGlfscList" setup>
  import {apiGlfsc, listNoThenThisMonth} from "./DbGlfsc.api";
  import {ref, computed, unref,nextTick,shallowRef, ComponentOptions,} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import DbGlfscModal from './components/DbGlfscModal.vue'
  import DbGlfscUrginBillFirst from './components/DbGlfscUrginBillFirst.vue'
  import CopyByMonth from './components/CopyByMonth.vue'
  import DbGlfscExportModal from './components/DbGlfscExportModal.vue'
  import {columns, searchFormSchema} from './DbGlfsc.data';
  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './DbGlfsc.api';
  import {useMessage} from "/@/hooks/web/useMessage";
  import { downloadFile } from '/@/utils/common/renderUtils';
  import {useGo} from "/@/hooks/web/usePage";
  import {useGlobSetting} from "/@/hooks/setting";
  import {defHttp} from '/@/utils/http/axios';
  import {useRouter,useRoute} from "vue-router"
  const globSetting = useGlobSetting();
  const checkedKeys = ref<Array<string | number>>([]);
  //注册model
  const [registerModal, {openModal}] = useModal();
  const { createMessage, createErrorModal } = useMessage();
  const [register4, { openModal: openModal4 }] = useModal();
  const [registerExport, { openModal: openModalExport }] = useModal();
  const [registerUrginBillFirst, { openModal: openModalUrginBillFirst }] = useModal();

  const modalVisible = ref<Boolean>(false);
  const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
  const userData = ref<any>(null);
  const go = useGo();
  const router = useRouter()
  const route = useRoute()
 // const [registerModalMonthSelect, {openModal:openModalMonthSelect}] = useModal();
  //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: 'db_glfsc',
           api: listNoThenThisMonth,
           columns,
           canResize:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
          defSort:{
            column: 'sfyf',
            order: 'desc',
          },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
      },
       exportConfig: {
            name:"db_glfsc",
            url: getExportUrl,
          },
          importConfig: {
            url: getImportUrl,
            success: handleSuccess
          },
  })


  const [registerTable, {reload,getForm},{ rowSelection, selectedRowKeys }] = tableContext


  function rowclassname(record){
    console.log(record.isdeal)
    if(record.isdeal=="1"){
      return "";
    }else{
      
      return "bg-red";
    }

  }

  function openTargetModal(index) {
    currentModal.value = CopyByMonth;

    nextTick(() => {
      // `useModal` not working with dynamic component
      // passing data through `userData` prop
      modalVisible.value = true;
    });
  }


  function openExportModalForCheck(){
    currentModal.value = DbGlfscExportModal;

    nextTick(() => {
      // `useModal` not working with dynamic component
      // passing data through `userData` prop
      userData.value = {showbank:true,showsfyf:true,showqyxz:true,showsshy:true,showqymc:true,showtype:false,url:apiGlfsc.exportXlsForCheck,title:"银行核对导出" };
      modalVisible.value = true;
    });
  }

  function openTargetExportModal(){
    currentModal.value = DbGlfscExportModal;

    nextTick(() => {
      // `useModal` not working with dynamic component
      // passing data through `userData` prop
      userData.value = {showbank:true,showsfyf:true,showqyxz:true,showsshy:true,showqymc:true,showtype:true,url:apiGlfsc.exportXlsBy,title:"银行代扣导出" };
      modalVisible.value = true;
    });
  }
   /**
    * 新增事件
    */
  function handleAdd() {
     openModal(true, {
       isUpdate: false,
       showFooter: true,
     });
  }

  function handleCopy() {
  }
   /**
    * 编辑事件
    */
  function handleEdit(record: Recordable) {
      let data = {
        htbh: record.htbh,//合同
        sfyf: record.sfyf//月份
      }
     defHttp.get({url: '/assets.accountReceive/dbHire/list', params:data}).then(res=>{
       if(res.records.length>0){
         createMessage.warn("当前收款计划已经收款，不能修改");
       }
        openModal(true, {
          record,
          isUpdate: true,
          showFooter: res.records.length ? false : true,
        });
     })
    
   }
   /**
    * 详情
   */
  function handleDetail(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
   }
   /**
    * 删除事件
    */
  async function handleDelete(record) {
     await deleteOne({id: record.id}, handleSuccess);
   }
   /**
    * 批量删除事件
    */
  async function batchHandleDelete() {
     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
   }
   /**
    * 成功回调
    */
  function handleSuccess() {
    

      (selectedRowKeys.value = []) && reload();
   }
   /**
      * 操作栏
      */
  function getTableAction(record){
       return [
         {
           label: '编辑',
           onClick: handleEdit.bind(null, record),
         }
       ]
   }
     /**
        * 下拉操作栏
        */
  function getDropDownAction(record){
       return [
         {
           label: '详情',
           onClick: handleDetail.bind(null, record),
         }, {
           label: '删除',
           popConfirm: {
             title: '是否确认删除',
             confirm: handleDelete.bind(null, record),
           }
         }
       ]
   }


  function urgingBillFirst(){


    openModalUrginBillFirst(true, {
      isUpdate: true,
      showFooter: false,
    });

/*    console.log(getForm().validate());
    //go("/eamboot/jmreport/shareView/871622313477885952?htbh="+select[0].htbh);
    //  go("/urginbill/view");
    // go(`UrgingBill?htbh=${select[0].htbh}`)
    getForm().validate().then((data)=>{
      router.push({
        path: 'UrgingBillFirst',
        query:{
          htbh :data.htbh,
          sfyf: data.sfyf,
        }
      })
    })*/

  }

  function urgingBillZnj(){
    const select = rowSelection.selectedRows;


    if(select.length != 1){
      return createMessage.warn("催款通知书只能选择单条数据操作")
    }

    router.push({
      path: 'UrgingBillZnj',
      query:{
        htbh :select[0].htbh
      }
    })
  }
   function urgingBill(){
      const select = rowSelection.selectedRows;

      
     if(select.length != 1){
       return createMessage.warn("催款通知书只能选择单条数据操作")
     }
    
    router.push({
      path: 'UrgingBill',
      query:{
        htbh :select[0].htbh
      }
    })
   }

</script>

<style scoped>
  /deep/.bg-red{
    background:#db7093;
    /*pointer-events: none;  !* 取消斑马纹*!*/
  }
  /deep/ .bg-red .ant-table-cell-fix-right{
    background:#fff !important;
  }
  /deep/.ant-table-cell-fix-right .ant-table-cell-fix-right-first:hover{
    background:#fff !important;
  }
  /deep/ table tbody tr:hover>td { background-color:transparent!important; }
  /deep/ .ant-table-cell-row-hover{
    background-color:transparent!important;
  }
</style>
